import React, {Component} from 'react'
import {StatusBar, StyleSheet, Text, View} from 'react-native'
import AppIntroSlider from 'react-native-app-intro-slider';
import Ionicons from 'react-native-vector-icons/Ionicons';

const styles = StyleSheet.create({
    image: {
        width: 320,
        height: 320,
    },
    buttonCircle: {
        width: 40,
        height: 40,
        backgroundColor: 'rgba(0, 0, 0, .2)',
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

const slides = [
    {
        key: 'something',
        title: 'Title 1',
        text: 'Description.\nSay something cool',
        image: {uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'},
        imageStyle: styles.image,
        backgroundColor: '#59b2ab',
    },
    {
        key: 'somethun-dos',
        title: 'Title 2',
        text: 'Other cool stuff',
        image: {uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'},
        imageStyle: styles.image,
        backgroundColor: '#febe29',
    },
    {
        key: 'somethun1',
        title: 'Rocket guy',
        text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
        image: {uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'},
        imageStyle: styles.image,
        backgroundColor: '#22bcb5',
    }
];

export default class Boot extends Component {
    componentDidMount() {
        this.timeout = setInterval(() => {
            this.activeIndex = this.appIntroSlider.state.activeIndex
            this.appIntroSlider.goToSlide(this.activeIndex == slides.length - 1 ? 0 : this.activeIndex + 1)
        }, 2000)


    }

    componentWillUnmount() {
        this.timeout && clearInterval(this.timeout);
    }


    renderNextButton = () => {
        return (
            <View style={styles.buttonCircle}>
                <Ionicons
                    name="md-arrow-round-forward"
                    color="rgba(255, 255, 255, .9)"
                    size={24}
                    style={{backgroundColor: 'transparent'}}
                />
            </View>
        );
    }

    renderSkipButton = () => {
        return (
            <View><Text style={{fontStyle: 'italic', fontSize: 20, fontWeight: 'bold'}}>Skip</Text></View>
        );
    }
    renderDoneButton = () => {
        return (
            <View style={styles.buttonCircle}>
                <Ionicons
                    name="md-checkmark"
                    color="rgba(255, 255, 255, .9)"
                    size={24}
                    style={{backgroundColor: 'transparent'}}
                />
            </View>
        );
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <StatusBar hidden={true}/>
                <AppIntroSlider
                    ref={(o) => {
                        this.appIntroSlider = o
                    }}
                    slides={slides}
                    showSkipButton={true}
                    renderSkipButton={this.renderSkipButton}
                    onSkip={() => {
                        this.props.navigation.replace('Home')
                    }}
                    renderDoneButton={this.renderDoneButton}
                    renderNextButton={this.renderNextButton}
                    onDone={() => {
                        this.props.navigation.replace('Home')
                    }}
                />
            </View>
        );
    }
}
